<template>
  <div
    class="home-office"
    ref="homeOffice"
  >
    <h2 class="class-title">今日票房</h2>
    <el-card
      class="box-card"
      v-for="(office,index) in officeList"
      :key="office.id"
    >
      <div
        class="office-wrap1"
        v-if="index === 0"
        @mouseover="changeColor(index)"
        @mouseout="moveColor()"
      >
        <i class="office-top"></i>
        <img
          src="../../../../public/home/1.jpg"
          alt=""
        >
        <h3 class="office-title">{{ office.title }}</h3>
        <div class="office-num">
          {{ office.num }}万
        </div>
      </div>
      <div
        class="office-wrap2"
        v-else
        @mouseover="changeColor(index)"
        @mouseout="moveColor()"
      >
        <span
          class="office-index"
          :class="{'activeIndex': index + 1 === 2 || index + 1 === 3 }"
        >{{ index + 1 }}</span>
        <span class="office-title">{{ office.title }}</span>
        <span class="office-num">{{ office.num }}万</span>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data: () => ({
    arr: [],
    moveIndex: '',
    officeList:[]
  }),
  created() {
    this.getOffice()
  },
  methods: {
    changeColor(index) {
      this.arr = Array.from(this.$refs.homeOffice.children).slice(1)
      this.arr[index].style.backgroundColor = '#eee'
      this.moveIndex = index
    },
    moveColor() {
      this.arr[this.moveIndex].style.backgroundColor = "#fff"
    },
    async getOffice() {
      try {
        const { data: { message } } = await this.Api.getOffice()
        this.officeList = message
      } catch (error) {
        this.$MsgBox('获取首页今日票房的信息失败')
      }
    }
  }
}
</script>
<style lang="less">
.home-office {
  .class-title {
    color: #ef4238;
  }
  .el-card:nth-child(3).is-always-shadow,
  .el-card:nth-child(4).is-always-shadow,
  .el-card:nth-child(5).is-always-shadow,
  .el-card:nth-child(6).is-always-shadow{
    border: none;
    box-shadow:none;
  }
  .el-card {
    .el-card__body {
      padding: 0;
      .office-wrap1 {
        height: 78px;
        position: relative;
        .office-top {
          display: inline-block;
          position: absolute;
          left: 0;
          top: 0;
          width: 22px;
          height: 25px;
          background: url(../../../../public/home/office-top.png);
        }
        .office-title {
          position: absolute;
          left: 130px;
          top: 0;
          font-weight: normal;
        }
        .office-num {
          position: absolute;
          left: 130px;
          bottom: 10px;
          color: #ef4238;
          font-size: 14px;
        }
      }
      .office-wrap2 {
        height: 35px;
        padding: 10px 3px;
        line-height: 35px;
        .office-index {
          display: block;
          width: 20px;
          font-size: 18px;
          float: left;
          font-style: italic;
          color: #999;
          margin-right: 10px;
        }
        .office-title {
          display: block;
          max-width: 190px;
          overflow: hidden;
          font-size: 18px;
          color: #333;
          float: left;
        }
        .office-num {
          display: block;
          float: right;
          color: #ef4238;
        }
        .activeIndex {
          color: #ef4238;
        }
      }
    } 
  }
} 

</style>